import React, { useState, useEffect } from 'react'
import { Row, Col, Image, Card, Skeleton } from 'antd'

import styles from './index.less'
const { Meta } = Card

const names = [
  "美食",
  "生活",
  "旅行",
  "自拍",
  "美女",
  "学习",
  "家人",
  "奖状",
  "游戏",
  "其他"
]
const coverurl = [
  "https://img7.htimgs.com/2014/1001/20141001065410964.jpg",
  "http://5b0988e595225.cdn.sohucs.com/images/20181110/5664ef9605f14fbcab930c4790b87009.jpeg",
  "https://img1.baidu.com/it/u=1775725419,2189155006&fm=26&fmt=auto&gp=0.jpg",
  "https://img1.baidu.com/it/u=3098416972,349770303&fm=26&fmt=auto&gp=0.jpg",
  "https://img1.baidu.com/it/u=1892186550,1612630468&fm=26&fmt=auto&gp=0.jpg",
  "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00626-267.jpg",
  "https://img1.baidu.com/it/u=1378407717,2718026440&fm=26&fmt=auto&gp=0.jpg",
  "http://yz.jsjc.gov.cn/zt/fytx/201902/W020190221487756295261.jpg",
  "https://pic2.zhimg.com/v2-d41b358aa2ec75445259838939f9fed5_1440w.jpg?source=172ae18b",
  "http://image.biaobaiju.com/uploads/20190521/15/1558422467-PJnrbgzufA.jpg"
]

const dataUrl = "https://120.76.193.53/app/mock/data/2060804?scope=response&id="

const albumDemo = {
  "id": 1,
  "category": "/美食/家常菜",
  "tag": "美食",
  "name": "美食",
  "up": 354,
  "down": 800,
  "comment": 464,
  "cover": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg-cdn.hopetrip.com.hk%2F2014%2F1001%2F20141001065410964.jpg&refer=http%3A%2F%2Fimg-cdn.hopetrip.com.hk&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1632554290&t=f92011258f532e4c90f7a7a58450e51f",
  "createTime": "2021-08-25 14:48:00",
  "updateTime": "2021-08-25 14:48:00",
  "publishTime": "2021-08-25 15:22:00",
  "creator": "萧超",
  "editor": "叶超"
}

function Album(props) {

  const [albumList, setAlbumList] = useState([]);
  const [loading, setLoading] = useState(true)

  const fetchAlbumList = () => {
    setTimeout(() => {
      fetch(dataUrl).then(res => res.json()).then(res => {
        const albumData = res.results;
        setAlbumList(albumData);
      }).finally(
        setLoading(false)
      )
    }, 10);

  }

  useEffect(() => {
    fetchAlbumList()
  }, [])

  // 相册点击事件
  const handleClick = (id) => {
    // 跳转相册详情页面
    props.history.push(`/album/${id}`)
  }

  const renderAlbums = () => {
    return albumList.map(
      album => {
        return (
          <Col
            className={styles['Album-Col']}
            xs={24} sm={12} md={12} lg={12} xl={8} xxl={8} span={6} key={album.id} >
            <Card
              className={styles['Album-Card']}
              hoverable
              cover={
                <Image
                  preview={false}
                  alt={album.name}
                  src={album.cover}
                  fallback=""
                />
              }
              onClick={() => handleClick(album.id)}
            >
              <Meta title={album.name} description={album.tag} />
            </Card>
          </Col>
        )
      }
    )
  }


  return (
    <div className={styles['album-container']}>
      <Row gutter={[16, 16]}>
        {renderAlbums()}
      </Row>
    </div>
  )
}

export default Album
